<template>
    <el-row>
        <el-form :model="form" label-width="120px" :inline="true">

        <el-form-item label="操作人" style="width: 220px;">
            <el-select v-model="form.userId" placeholder="操作人">
                <el-option v-for="user in users" :label="user.username" :value="user.userId" />
            </el-select>
        </el-form-item>

        <el-form-item label="订单状态" style="width: 220px;">
            <el-select v-model="form.orderState" placeholder="订单状态">
                <el-option label="待取订单" value="待取订单" />
                <el-option label="待付款订单" value="待付款订单" />
                <el-option label="已完成订单" value="已完成订单" />
                <el-option label="退回订单" value="退回订单" />
            </el-select>
        </el-form-item>

        <el-form-item label="订单时间">
            <el-time-picker
            v-model="form.queryTime"
            is-range
            range-separator="到"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="query" class="active">查询</el-button>
        </el-form-item>
        </el-form>
    </el-row>
    <el-row style="margin:0 20px;">
        <el-table :data="orders" stripe style="width: 100%" highlight-current-row @current-change="handleCurrentChange">
            <el-table-column prop="orderId" label="订单号" width="180" />
            <el-table-column prop="orderTime" label="下单时间" :formatter="formatDate"/>
            <el-table-column prop="total" label="订单金额" width="180" />
            <el-table-column prop="pack" label="打包" width="180" :formatter="boolFormat"/>
            <el-table-column prop="orderState" label="状态" width="180"/>
            <el-table-column  label="操作人" width="180">{{ store.user.username }}  </el-table-column>
        </el-table>
    </el-row>

    <el-row style="position: absolute;bottom: 20px;margin: 0 20px;" class="bottom">
        <el-button size="large" @click="takeOrder">确认取餐</el-button>
        <el-button size="large" @click="confirmOrder">付款</el-button>
        <el-button size="large" @click="abortOrder">退 单</el-button>
        <el-button size="large">查看详情</el-button>
    </el-row>

    <el-dialog
        v-model="centerDialogVisible"
        title="Warning"
        width="500"
        align-center>
        <template #header>
            <span style="font-size: 18px;">结账</span>
        </template>
        <div>
            <span style="font-size: 16px;">已选商品</span>
        </div>
        <el-table :data="orderItems" style="width: 100%;border:0" >
            <el-table-column prop="dish.dishName" label="菜品" width="180" />
            <el-table-column prop="num" label="数量" width="180" />
            <el-table-column prop="price" label="价格" />
        </el-table>
        <el-row style="margin-top: 10px;font-size: 16px;">
            <span v-if="currentOrder.pack">打包费用: 20</span>
            <span v-else>打包费用: 0</span>
        </el-row>
        <el-row style="margin-top: 10px;">
            <el-col :span="12">
                <div style="font-size: 16px;">付款二维码</div>
                <div >
                    <el-image :src="weixin" width="100%" fit="contain" />
                </div>
            </el-col>
            <el-col :span="12">
                <span style="font-size: 16px;" >总金额: {{ currentOrder.total }}</span>
            </el-col>
        </el-row>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="payOrder">付款</el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { onBeforeMount,ref,getCurrentInstance, reactive} from 'vue'
import { useStore } from '@/stores'
import { dayjs, ElMessage } from 'element-plus'
import QRCode from 'qrcode'

const { proxy } = getCurrentInstance()
const store = useStore()
const orders=ref([])
const users=ref([])
const orderItems=ref([])
const weixin=ref()
const centerDialogVisible = ref(false)
const form = reactive({
    userId:'',
    queryTime:[
        dayjs().hour(8).minute(30),
        dayjs().hour(23).minute(30)
    ],
    orderState:''
})
const currentOrder = ref()
const handleCurrentChange = (val) => {
    currentOrder.value = val
}

onBeforeMount(async ()=>{
    let { data: res} = await proxy.$http({
        method:'get',
        headers: {
            'Authorization': store.token	//	可以是授权凭证用的参数值
        },
        url:'/api/order/today'
	})
    orders.value=res.data

    let { data: result} = await proxy.$http({
		  method:'get',
          headers: {
		    'Authorization': store.token	//	可以是授权凭证用的参数值
	      },
		  url:'/api/user'
	})
    users.value=result.data
})

async function query(){
    let { data: res} = await proxy.$http({
		  method:'post',
          headers: {
		    'Authorization': store.token	//	可以是授权凭证用的参数值
	      },
		  url:'/api/order/query',
          data: form
	})
    orders.value=res.data
    console.log(orders.value)
}

async function takeOrder(){
    if(!currentOrder.value){
        ElMessage('未选取订单！')
        return
    }
    if(currentOrder.value.orderState!='待取订单'){
        ElMessage('订单状态不能取餐！')
        return
    }
    let { data: res} = await proxy.$http({
		  method:'put',
          headers: {
		    'Authorization': store.token	//	可以是授权凭证用的参数值
	      },
		  url:`/api/order/take/${currentOrder.value.orderId}`,
	})
    currentOrder.value.orderState='待付款订单'
}

async function confirmOrder(){
    if(!currentOrder.value){
        ElMessage('未选取订单！')
        return
    }
    if(currentOrder.value.orderState!='待付款订单'){
        ElMessage('订单状态不能付款！')
        return
    }
    let { data: res} = await proxy.$http({
		  method:'get',
          headers: {
		    'Authorization': store.token	//	可以是授权凭证用的参数值
	      },
		  url:`/api/order/orderItem/${currentOrder.value.orderId}`,
	})
    orderItems.value=res.data
    console.log(orderItems.value)
    let result=await QRCode.toDataURL(
        `/api/order/pay/${currentOrder.value.orderId}`,{
          color: {
            dark:"#000",
            light:"#fff"
          }
        }
      )
    console.log(result)
    weixin.value=result
    centerDialogVisible.value = true
}


async function payOrder(){
    let { data: res} = await proxy.$http({
		  method:'put',
          headers: {
		    'Authorization': store.token	//	可以是授权凭证用的参数值
	      },
		  url:`/api/order/pay/${currentOrder.value.orderId}`,
	})
    currentOrder.value.orderState='已完成订单'
    centerDialogVisible.value = false
}

async function abortOrder(){
    if(!currentOrder.value){
        ElMessage('未选取订单！')
        return
    }
    if(currentOrder.value.orderState!='待取订单'){
        ElMessage('待付款订单,已完成订单不能取消！')
        return
    }
    let { data: res} = await proxy.$http({
		  method:'put',
          headers: {
		    'Authorization': store.token	//	可以是授权凭证用的参数值
	      },
		  url:`/api/order/abort/${currentOrder.value.orderId}`,
	})
    currentOrder.value.orderState='退回订单'
    centerDialogVisible.value = false
}
function formatDate(row, column, cellValue, index){
    //时间改为东8区，要减8个小时
    return dayjs(cellValue).subtract(8, 'hour').format('YYYY-MM-DD HH:mm:ss')
}

function boolFormat(row, column, cellValue, index){
    return cellValue?'是':'否'
}
</script>

<style scoped>
.el-button{
    background: rgb(253,95,32);
    color: #fff;
    border: 0;
}
.el-table td.el-table__cell {
    border-bottom: 0;
}
</style>